import {createStackNavigator} from '@react-navigation/stack';
import EventListScreen from 'pages/EventListScreen/EventListScreen';
import React from 'react';
import {StyleSheet} from 'react-native';
import {Image} from 'react-native-elements';
import {useDispatch, useSelector} from 'react-redux';
import {selectUser} from 'reduxState/selectors';
import actions from 'reduxState/actions';
import TabNavigator from './TabNavigator';
import UserTabNavigator from './UserTabNavigator';
import {navigate} from 'utils/navigationService';

export type MainStackParamList = {
  EventsListScreen: undefined;
  DetailsScreen: {detailId: string};
  UserScreen: undefined;
};

const {Navigator, Screen} = createStackNavigator<MainStackParamList>();

export default function MainStackNavigator() {
  const userInfo = useSelector(selectUser);
  const dispatch = useDispatch();
  function LogoTitle(props: any) {
    return (
      <Image
        style={styles.headerIcon}
        source={require('assets/icons/logo-cat.png')}
        onPress={() => {
          dispatch(actions.logout());
        }}
      />
    );
  }
  return (
    <Navigator
      screenOptions={{
        headerBackTitle: '返回',
        headerStyle: {
          backgroundColor: '#8560A9',
        },
        headerRight: () => (
          <Image
            style={styles.headerIconCircle}
            onPress={() => {
              //TODO:跳转至用户页
              dispatch(actions.setActiveTab('Likes'));
              navigate('UserScreen');
            }}
            source={{uri: userInfo?.avatar}}
          />
        ),
      }}>
      <Screen
        name="EventsListScreen"
        component={EventListScreen}
        options={{headerTitle: (props) => <LogoTitle {...props} />}}
      />
      <Screen
        name="DetailsScreen"
        component={TabNavigator}
        options={{headerTitle: (props) => <LogoTitle {...props} />}}
      />
      <Screen
        name="UserScreen"
        component={UserTabNavigator}
        options={{headerTitle: (props) => <LogoTitle {...props} />}}
      />
    </Navigator>
  );
}

const iconWidth = 24;
const styles = StyleSheet.create({
  headerIcon: {
    width: iconWidth,
    height: iconWidth,
  },
  headerIconCircle: {
    marginRight: 14,
    width: iconWidth,
    height: iconWidth,
    borderRadius: iconWidth / 2,
  },
});
